<template>
	<view class="wrap">
		<!-- 顶部滑动图 -->
		<swiper class="topSwiper" indicator-dots @change="changePage">
			<swiper-item>
				<view class="content">
					<view class="topTitle title">
						本月支出（元）
					</view>
					<view class="money">
						￥{{totalPay}}
					</view>
					<view class="bottomTitle title">
						本月收入 {{totalIncome}}
					</view>
				</view>

			</swiper-item>
			
			<swiper-item>
				 <view class="content">
				 	<view class="topTitle title">
				 		本月预算（元） 
				 	</view>
				 	<view class="money">
				 		￥{{preset}}
				 	</view>
				 	<view class="bottomTitle title">
				 		本月剩余 {{surplus}}
				 	</view>
				 </view>
				 
			</swiper-item>
		</swiper>
		
		<!-- 记一笔/修改预算 按钮 -->
		<!-- 后期添加切换动画 <transition>组件app不适配！-->

			<button class="addRecord" v-show="curIndex == 0">
				<span>记一笔</span>
			</button>
		

			<button class="addRecord" v-show="curIndex == 1">
				<span>修改预算</span>
			</button>

		
		<!-- 账单列表 -->
		<view class="billList" v-show="curIndex == 0">
			<view class="topLine">
				<view class="date">
					{{date}} 今天
				</view>
				
				<view class="totalMoney">
					支：{{totalPay}} &nbsp;&nbsp;&nbsp;&nbsp;收：{{totalIncome}}
				</view>
			</view>
			
			<scroll-view class="recordList" scroll-y>
				<view class="recordWrap" v-for="(item,index) in 10">
					<Record></Record>
				</view>
			</scroll-view> 
			
			<view class="bottomTip" >
				——以上为最近账单，更多请在帐本中查看——
			</view>	
			
		</view>
		
		<view class="changeMode" v-show="curIndex == 0">
			<span>切换家庭模式</span>
			<view class="icon iconfont icon-gengduo" :style="{'--color':color}">
				
			</view>
		</view>
		
		
		<!-- 预算页面 -->
		<view class="presetWrap" v-show="curIndex == 1">
			<view class="boxList">
				<view class="box box1">
					<view class="des">剩余预算</view>
					<view class="">0.0</view>
				</view>
				<view class="box box2">
					<view class="des">本月支出</view>
					<view class="">0.0</view>
				</view>
				<view class="box box3">
					<view class="des">本月收入</view>
					<view class="">0.0</view>
				</view>				
				
			</view>

		</view>
		
		
	</view>
</template>

<script>
	import Record from '../../components/Record.vue'
	export default {
		components:{
			Record,
		},
		data() {
			return {
				/* 轮播图数据 */
				totalPay:"210.00",
				totalIncome:"0.00",
				curIndex:0,
				preset:"1800.00",
				surplus:"0.00",
				
				/* 账单列表 */
				recordList:[{},{},{},{}],
				
				/* 测试 */
				color:'#A2A2A2',
				
				/* 状态 */
				
			}
		},
		
		computed:{
			date(){
				let date = new Date();
				let month = date.getMonth()+1;
				let day = date.getDate()
				return month+"月"+day+"日"
			}
		},
		methods: {
			/* 改变页面 */
			changePage(e){
				this.curIndex = e.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	width: 750rpx;
	height: 100%;
	position: relative;
	.topSwiper{
		width: 100%;
		height: 397.78rpx;
		background-color: #D9D9D9;
		border-radius: 0px 0px 52.57rpx 52.57rpx;
		position: relative;
		.content{
			position: absolute;
			left: 52.57rpx;
			top:101.63rpx;
			.title{
				font-size: 35.05rpx;
			}
			
			.money{
				font-size: 78.85rpx;
				margin-right: 400.76rpx;
			}
		}
	
	}
	
	
	.addRecord{
		position: absolute;
		width: 644.86rpx;
		height: 110.4rpx;
		left: 52.57rpx;
		top: 452.1rpx;
		background: #D9D9D9;
		border-radius: 35.05rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 52.57rpx;
		transition: 0.5s;
		span{
			transition: 0.3s;
		}
	
		
	}
	
	/* 账单列表 */
	.billList{
		width: 100%;
		position: absolute;
		top:623.83rpx;
		/* background-color: pink; */
		.topLine{
			display: flex;
			justify-content: space-between;
			font-size: 26.28rpx;
			color: #7A7A7A;
			.date{	
				margin-left: 30rpx;
			}
			.totalMoney{
				margin-right: 30rpx;
			}
		}
		
		.recordList{
			width: 100%;
			height: 590.68rpx;
			.recordWrap{
				margin-top :28rpx;
			}
		}
		
		.bottomTip{
			text-align: center;
			font-size: 26.28rpx;
			margin-top: 25.05rpx;
			color: #A2A2A2;
		}
	}
	/*  切换模式 */
	.changeMode{
		position: absolute;
		top:1359.81rpx;
		left: 439.83rpx;
		display: flex;
		span{
			font-size: 35.05rpx;
			margin-right: 15.05rpx;
			line-height: 42.06rpx;
			
		}
		.icon{
			font-size: 45.05rpx;
		}
	}

	
	.presetWrap{
		width: 100%;
		position: absolute;

		top:1191.58rpx;
		.boxList{
			width: 100%;
			display: flex;
			justify-content: space-around;
			.box{
				text-align: center;
				width: 201.52rpx;
				height: 175.23rpx;
				background: #E9E9E9;
				border-radius: 35.05rpx;
				font-size: 35.05rpx;
				.des{
					margin:28.04rpx 0 26.28rpx;
				}
			}
		}
	}
}


</style>
 
 
